<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>日志列表</title>
    <th:block th:include="include :: header('日志列表')"/>
</head>
<body class="pear-container">

<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-tab" lay-filter="tab">
            <ul class="layui-tab-title">
                <li class="layui-this">登录日志</li>
                <li>操作日志</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <table id="user-table" lay-filter="user-table"></table>
                </div>
                <div class="layui-tab-item">
                    <table id="user-table2" lay-filter="user-table2"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- json展示弹窗 -->
<div id="showJson" style="display: none">
    <pre id="result"></pre>
</div>

<script type="text/html" id="user-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-form"></i>
    </button>
</script>
<script type="text/html" id="user-bar2">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-form"></i>
    </button>
</script>


<script type="text/html" id="logtype-column">
    {{# if(d.loggingType == 'LOGIN' ){ }}
    <div>登录</div>
    {{# }else{ }}
    <div>操作</div>
    {{# } }}
</script>

<script type="text/html" id="success-column">
    {{# if(d.success == 'false' ){ }}
    <div style="color: #f56c6c">失败</div>
    {{# }else{ }}
    <div style="color: #36b368">成功</div>
    {{# } }}
</script>

<script type="text/html" id="deliver-column">
    {{# if(d.deliverStatus == 1){ }}
    <button type="button" class="fs13 tag-item tag-item-normal layui-btn layui-btn-primary layui-btn-sm">已发货</button>
    {{# }else{ }}
    <button type="button" class="fs13 tag-item tag-item-warm layui-btn layui-btn-primary layui-btn-sm">未发货</button>
    {{# } }}
</script>

<th:block th:include="include :: footer"/>

<script>

    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2);
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span class="' + cls + '">' + match + '</span>';
            }
        );
    }

    /**
     * 点击展示正常尺寸图片
     * @param t
     */
    function showImg(t) {
        let $ = layui.jquery;
        let x = $(t).find("img");
        layer.open({
            type: 1,
            shadeClose: true,
            title: false,
            closeBtn: 0,
            end: function (index, layero) {
                return false;
            },
            content: '<div style="text-align: center"><img src="' + $(x).attr('src') + '"></div>'
        })
    }

    layui.use(['table', 'form', 'jquery', 'drawer', 'dropdown', 'element'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let element = layui.element;

        let cols = [
            [
                {title: '标题', field: 'title', align: 'center'},
                {title: '描述', field: 'description', align: 'center'},
                {title: '操作人', field: 'operateName', align: 'center'},
                {title: '请求方式', field: 'requestMethod', align: 'center'},
                {title: 'IP', field: 'operateAddress', align: 'center'},
                {title: '接口', field: 'requestUrl', align: 'center'},
                {title: '浏览器', field: 'browser', align: 'center'},
                {title: '访问状态', field: 'success', align: 'center', templet: "#success-column"},
                {title: '操作系统', field: 'systemOs', align: 'center'},
                {title: '操作时间', field: 'createTime', align: 'center'},
                {title: '操作', align: 'center', toolbar: '#user-bar'}
            ]
        ]

        element.on('tab(tab)', function (data) {
            let index = data.index
            if (index === 0) {


            } else if (index === 1) {
                // 操作日志列表
                table.render({
                    elem: '#user-table2',
                    url: suffix + '/monitor/log/operateList',
                    page: true,
                    cols: cols,
                    skin: 'line',
                    toolbar: '#user-toolbar',
                    defaultToolbar: ['', '', ''],
                    done: function (res, curr, count) {
                    }
                });
            }
        });


        // 登录日志列表
        table.render({
            elem: '#user-table',
            url: suffix + '/monitor/log/loginList',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#user-toolbar',
            defaultToolbar: ['', '', ''],
            done: function (res, curr, count) {
            }
        });

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('tool(user-table2)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        form.on('submit(user-query)', function (data) {
            table.reload('user-table', {
                where: {
                    cond: data.field.cond
                }
            })
            return false;
        });


        window.add = function () {
            layer.open({
                type: 2,
                content: suffix + '/mall/add',
                area: ['600px', '684px'],
                title: '添加'
            });
        }

        window.edit = function (obj) {
            console.log(obj)
            $("#result").html(syntaxHighlight(obj.data))
            layer.open({
                type: 1,
                content: $("#showJson"),
                shadeClose: true,
                success: function () {
                }
            });
        }



        window.refresh = function (param) {
            table.reload('user-table');
        }

        $("#reset").click(function () {
            $("input[name='realName']").val('');
            table.reload('user-table', {
                where: {
                    cond: ''
                }
            })
        });


    })
</script>
</body>
</html>
